<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList" @Launchform="Launchform3" @findClicked="findData" />
    <el-card style="margin-top: 10px" shadow="always" :body-style="{ padding: '5px' }">
      <table>
        <thead>
          <tr>
            <th class="first-column" rowspan="2">{{$t(`Print.Brand`)}}</th>
            <th>{{$t(`Print.Directives`)}}</th>
            <th>{{$t(`Print.NumberOfOrders`)}}</th>
            <th>{{$t(`Print.PlaceOrderDate`)}}</th>
            <th>{{$t(`Print.CustomerDeliveryDate`)}}</th>
            <th>{{$t(`Print.OutboundInTheCurrentPeriod`)}}</th>
            <th>{{$t(`Print.CumulativeOutboundShipments`)}}</th>
            <th>{{$t(`Print.OutgoingUnderbalance`)}}</th>
          </tr>
        </thead>
        <tbody>
          <template v-for="(item, index) in dateQueryTableDate?.rows">
            <tr
              v-for="(detail, detailIndex) in item.details"
              :key="detailIndex"
              :style="{ backgroundColor: item.custom === '合计' ? '#FFCC99' : item.custom === '总合计' ? '#00CCFF' : '' }"
            >
              <td v-if="detailIndex === 0" class="first-column" :rowspan="item.details.length">
                {{ item.custom }}
              </td>
              <td>{{ detail.lotNo }}</td>
              <td>{{ detail.orderQty }}</td>
              <td>{{ detail.orderDate }}</td>
              <td>{{ detail.deliveryDate }}</td>

              <td>{{ detail.qty }}</td>
              <td>{{ detail.pairOutQty }}</td>
              <td>{{ detail.outOweQty }}</td>
            </tr>
          </template>
        </tbody>
      </table>
      <PageModule :PageData="{ total: total1, buttonS: true }" @pageSizeChange="handleSizeChange1" @pageChange="handleCurrentChange1" />
    </el-card>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { ElMessage } from 'element-plus'
import fileRequest from '@/utils/fileRequest'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'DetailsOfFinishedProductDelivery'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import { ref, onMounted } from 'vue'
import { InventoryDetailsOfFinishedProducts, brandQury } from '@/api/WarehouseDepartment/WebPages/DetailsOfFinishedProductDelivery'
import { ReceivingUnitQuery } from '@/api/WarehouseDepartment/FactoryStorage/InputBottomReceivingIssuingMaterials'
// 品牌查询
const brandQuryMethods = async () => {
  const result = await brandQury()
  formList.value[1].selectOptions = EvaluatesTheArrayReturnValue(result.brands)
}

// 领用单位
const ReceivingUnitQueryMethods = async () => {
  let NewArray = []
  const result = await ReceivingUnitQuery()
  NewArray = result.reduce((arr: any, item: any) => {
    if (item.deptId && item.deptName) {
      // 只添加非空的 typeName 和 typeNo
      arr.push(item.deptId + ' ' + item.deptName)
    }
    return arr
  }, [])
  formList.value[2].selectOptions = EvaluatesTheArrayReturnValue(NewArray)
}

// 厂商获取
const EvaluatesTheArrayReturnValue = (ArrayList: any) => {
  return ArrayList.map((item: any, index: any) => {
    return {
      optionKey: index,
      optionValue: item,
      optionLabel: item
    }
  })
}

// 明细查询
const dateQueryTableDate = ref<any>([])

const dateQueryTableDateParms = ref({
  beginTime: '',
  custom: '',
  endTime: '',
  line: '',
  lotNo: '',
  pageNum: 1,
  pageSize: 40
})

const Launchform3 = (row: any) => {
  dateQueryTableDateParms.value.lotNo = row[0].inputValue
  dateQueryTableDateParms.value.custom = row[1].selectValue
  dateQueryTableDateParms.value.line = row[2].selectValue.split(' ')[1]
  dateQueryTableDateParms.value.beginTime = row[3].dateValue[0]
  dateQueryTableDateParms.value.endTime = row[3].dateValue[1]
  InventoryDetailsOfFinishedProductsMethods()
}

const total1 = ref(0)

const handleSizeChange1 = (val: number) => {
  dateQueryTableDateParms.value.pageSize = val
  InventoryDetailsOfFinishedProductsMethods()
}

const handleCurrentChange1 = (val: number) => {
  dateQueryTableDateParms.value.pageNum = val
  InventoryDetailsOfFinishedProductsMethods()
}

const InventoryDetailsOfFinishedProductsMethods = async () => {
  const result = await InventoryDetailsOfFinishedProducts(dateQueryTableDateParms.value)

  dateQueryTableDate.value = result
  total1.value = result.total
}

onMounted(() => {
  InventoryDetailsOfFinishedProductsMethods()

  ReceivingUnitQueryMethods()

  brandQuryMethods()
})

const isLoading5 = ref(false)

const formList = ref([
  {
    type: 'input',
    inputPlaceholder: '指令号',
    inputValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '客户',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '线别',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'date',
    dateLabel: '日期',
    dateValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  {
    type: 'button',
    checkboxLabel: '导出',
    bgColor: '#1890FF'
  }
])

const tableHeader5 = ref([
  {
    label: '线别',
    prop: 'partName',
    change: true
  },
  {
    label: '指令',
    prop: 'lotNo',
    change: true
  },
  {
    label: '品牌',
    prop: 'custom',
    change: true
  },
  {
    label: '订单数',
    prop: 'orderQty',
    change: true
  },
  {
    label: '下单日期',
    prop: 'orderDate'
  },
  {
    label: '客户交期',
    prop: 'deliveryDate'
  },
  {
    label: '当期入库',
    prop: 'inQty1'
  },
  {
    label: '累计入库',
    prop: 'inQty1'
  },
  {
    label: '入库欠数',
    prop: 'inQty1'
  }
])

const findData = async (find: string) => {
  if (find === '置空') {
    formList.value.forEach((item: any) => {
      item.inputValue = ''
      item.dateValue = ''
      item.selectValue = ''
    })
  }
  console.log(dateQueryTableDateParms.value)
  if (find === '导出') {
    if (dateQueryTableDateParms.value.beginTime === undefined || dateQueryTableDateParms.value.endTime === undefined) {
      JMessage.warning('导出时日期不可为空')
    } else {
      const res = (await fileRequest.post(`/stockWork/report/stockOut/export`, dateQueryTableDateParms.value)) as any
      const link = document.createElement('a') // 利用a标签自定义下载文件名
      let blob = new Blob([res.data]) // 创建Blob对象，设置文件类型
      link.style.display = 'none'
      //设置连接
      link.href = window.URL.createObjectURL(blob)
      link.download = decodeURIComponent(`${res.headers['content-disposition'].split('filename=')[1]}`) //自定义文件名字
      document.body.appendChild(link)
      //模拟点击事件
      link.click()
      document.body.removeChild(link)
    }
  }
}
</script>

<style lang="less" scoped>
table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}
th,
td {
  border: 1px solid #ddd;
  padding: 8px;
}
th {
  background-color: rgb(204, 255, 255);
}
.first-column {
  text-align: center; /* 第一列文字居中 */
}
.total-row {
  background-color: #f7e8c7; /* 你可以根据需要调整颜色 */
  font-weight: bold;
}
</style>
